import "./push.scss"
import { connect } from "react-redux";
import { getPush } from '../../action/action';
import { PullToRefresh } from 'antd-mobile';
@connect(
    state => {
        return {
            pushData: state.inform.pushData
        }
    }
)
export class Push extends React.Component {
    state = {
        refreshing: false,
        down: true,
        height: document.documentElement.clientHeight,
        data: [],
    }
    componentDidMount() {
        let { dispatch } = this.props;
        dispatch(getPush())
    }
    render() {
        let { pushData } = this.props;
        return (
            <PullToRefresh
                damping={60}
                ref={el => this.ptr = el}
                style={{
                    height: this.state.height,
                    overflow: 'auto',
                }}
                indicator={this.state.down ? {} : { deactivate: '下拉可以刷新' }}
                direction={this.state.down ? 'down' : 'up'}
                refreshing={this.state.refreshing}
                onRefresh={() => {
                    this.setState({ refreshing: true });
                    setTimeout(() => {
                        location.reload()
                        this.setState({ refreshing: false });
                    }, 1000);
                }}
            >
                <div className="push">
                    <ul>
                        {
                            pushData && pushData.messageList.map((item, index) => {
                                if (item.title == "官方通知") {
                                    return (
                                        <li key={index}>
                                            <div className="info" >
                                                <div className="via">
                                                    <img src={item.icon} />
                                                </div>
                                                <div className="msg">
                                                    <h4>{item.title}</h4>
                                                    <p></p>
                                                </div>
                                                {/* <span>&gt;</span> */}
                                                <p>{item.content}</p>
                                            </div>
                                        </li>
                                    )
                                }
                            })
                        }
                    </ul>
                </div>
            </PullToRefresh>
        )
    }
}